import React, { useEffect } from 'react';
import { Layout } from 'antd';
import styles from './Footer.module.css';
import { useWebsiteStore } from '@/store/useWebsiteStore';

const { Footer: AntFooter } = Layout;

interface FooterProps {
  className?: string;
}

const Footer: React.FC<FooterProps> = ({ className }) => {
  const { config, fetchConfig } = useWebsiteStore();

  useEffect(() => {
    fetchConfig();
  }, [fetchConfig]);

  return (
    <AntFooter className={`${styles.layoutFooter} ${className || ''}`}>
      <div className={styles.footer}>
        <div className={styles.footerLinks}>
          <div className={styles.footerSection}>
            <div className={styles.footerColumn}>
              <h4 className={styles.footerColumnTitle}>常用OJ平台</h4>
              <ul className={styles.footerColumnList}>
                <li><a href="https://www.luogu.com.cn/" target="_blank" rel="noopener noreferrer">洛谷</a></li>
                <li><a href="https://leetcode.cn/" target="_blank" rel="noopener noreferrer">力扣</a></li>
                <li><a href="https://www.lanqiao.cn/" target="_blank" rel="noopener noreferrer">蓝桥杯</a></li>
                <li><a href="https://codeforces.com/" target="_blank" rel="noopener noreferrer">Codeforces</a></li>
              </ul>
            </div>
            <div className={styles.footerColumn}>
              <h4 className={styles.footerColumnTitle}>学习资源</h4>
              <ul className={styles.footerColumnList}>
                <li><a href="#/learn">算法基础</a></li>
                <li><a href="#/learn">数据结构</a></li>
                <li><a href="#/learn">编程语言</a></li>
                <li><a href="#/learn">竞赛技巧</a></li>
              </ul>
            </div>
            <div className={styles.footerColumn}>
              <h4 className={styles.footerColumnTitle}>关于我们</h4>
              <ul className={styles.footerColumnList}>
                <li><a href="#/about">平台介绍</a></li>
                <li><a href="#/about">联系方式</a></li>
                <li><a href="#/about">使用帮助</a></li>
                <li><a href="#/about">常见问题</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className={styles.footerDivider}></div>
        <div className={styles.footerBottom}>
          <div className={styles.footerLogo}>
            <span>{config?.website_footer || '攀枝花第七高级中学'}</span>
          </div>
          <div className={styles.footerCopyright}>
            © {new Date().getFullYear()} {config?.website_footer || '攀枝花第七高级中学 在线编程学习平台'} 版权所有
          </div>
        </div>
      </div>
    </AntFooter>
  );
};

export default Footer;